import * as fs from 'fs';
import * as path from 'path';
import * as electron from 'electron'

import { DataMetadata, PropertyMetadata, ModifyPropertyCommand } from "./editor";
import { project } from "./project";
import { editorHistory } from './history';
import { AbstractPropertyItemRenderer, createPropertyItemRenderer } from './propertyitemrenderer';
import { reloadPreviewBoard } from './mainboard';
import { currentData } from './currentdata';

let inspector: DataInspector

export function getInspector() {
    return inspector;
}

export function changeDataInspector(metadata: DataMetadata | null) {

    const propertyEditorContainer = document.getElementById("propertyEditorContainer") as HTMLElement;
    const propertyTitle = document.getElementById("propertyTitle") as HTMLElement;

    propertyEditorContainer.innerHTML = propertyTitle.innerHTML = ""

    if (metadata) {
        inspector = new DataInspector(metadata);
        propertyTitle.innerText = metadata.title;
        propertyEditorContainer.appendChild(inspector.view)
        inspector.update();
    }

}




export class DataInspector {


    private model: any[] = [];
    private container: HTMLElement;
    view: HTMLElement;
    constructor(dataMetadata: DataMetadata) {
        const jsonData = currentData.getCurrentData();
        this.model = jsonData[dataMetadata.prefix];
        this.container = document.createElement("div");
        this.view = document.createElement("div");
        this.view.appendChild(this.container)
        const button = document.createElement("button");
        button.innerHTML = "添加";
        this.view.appendChild(button);
        if (button) {
            button.onclick = () => {
                const item: any = this.createItem();
                this.addItem(item);
            }
        }

    }

    updateItem(item: any): any {
        // this.saveAndReload();
    }

    createItem() {
        const arr = this.model;
        const item: any = {};
        const dataMetadata = currentData.getCurrentMetaData();
        for (let metadata of dataMetadata.propertyMetadatas) {
            if (metadata.type == "primarykey") {
                item[metadata.key] = arr[arr.length - 1][metadata.key] + 1;
            }
            else {
                item[metadata.key] = metadata.default;
            }
        }
        return item;
    }

    addItem(item: any) {
        this.model.push(item);
        this.update();
        // this.saveAndReload();
    }

    removeItem(item: any, itemRenderer: DataItemRenderer) {
        const index = this.model.indexOf(item);
        if (index >= 0) {
            this.model.splice(index, 1);
            this.update();
        }
        // this.saveAndReload();
    }

    update() {
        const propertyEditorContainer = this.container;
        propertyEditorContainer.innerHTML = ''
        const dataMetadata = currentData.getCurrentMetaData();
        for (const item of this.model) {
            const itemRenderer = new DataItemRenderer(item, dataMetadata.propertyMetadatas, this);
            propertyEditorContainer.appendChild(itemRenderer.view);
            itemRenderer.deleteButton.onclick = () => {
                this.removeItem(item, itemRenderer);
            }
        }
    }
}



class DataItemRenderer {

    inspector: DataInspector;

    view: HTMLElement;

    deleteButton: HTMLElement;

    constructor(data: any, metadatas: PropertyMetadata[], inspector: DataInspector) {
        this.inspector = inspector;
        const container = document.createElement('div');
        container.style.marginTop = container.style.marginBottom = '20px';
        container.style.border = "5px solid red";

        for (let metadata of metadatas) {
            const propertyItemRenderer1 = this.createPropertyItemRenderer(data, metadata);
            container.appendChild(propertyItemRenderer1);
        }
        const deleteButton = document.createElement("button");
        deleteButton.innerText = "删除";
        container.appendChild(deleteButton);
        this.deleteButton = deleteButton;
        this.view = container;
    }

    private createPropertyItemRenderer(item: any, metadata: PropertyMetadata) {
        const propertyKey = metadata.key;
        const propertyDescription = metadata.description;
        const container = document.createElement('div');
        const propertyName = document.createElement("span");
        propertyName.innerText = propertyDescription;
        const itemRenderer = createPropertyItemRenderer(metadata, item);
        itemRenderer.setSubmitCallback((from: any, to: any) => {
            const command = new ModifyPropertyCommand(item, to, from, propertyKey, this.inspector, itemRenderer);
            editorHistory.add(command);
        });
        const propertyValue = itemRenderer.getView();
        container.appendChild(propertyName);
        container.appendChild(propertyValue);
        return container;
    }
}